<template>
    <div class="dialog" @click="$emit('close')">
        <div class="dialog-con">
            <div class="title" @click="$emit('clear')">清空购物车</div>
            <ul v-if="buyList.length">
                <li v-for="item in buyList" :key="item.id">
                    <span>{{item.name}}</span>
                    <span>{{item.price}}</span>
                    <count :num="item.num" :id="item.id"></count>
                </li>
            </ul>
            <span v-else>购物车为空</span>
        </div>
    </div>
</template>
<script>
import count from './count'
export default {
    props:['buyList'],
    components:{
        count
    }
}
</script>
<style lang="scss">
    .dialog{
        width:100%;
        height:100%;
        overflow: hidden;
        position:absolute;
        top:0;
        left:0;
        background:rgba(0,0,0,.8);
    }
    .dialog-con{
        width:100%;
        background: #fff;
        position:absolute;
        bottom:0;
        left:0;
        padding:40px 0;
        li{
            border-bottom:1px solid gray;
            display: flex;
        }
    }
</style>

